<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>产品展示</title>
		<script src="js/layui/layui.js"></script>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<link rel="stylesheet" href="js/layui/css/layui.css" />
		<link rel="stylesheet" href="css/main.css" />
		<script type="text/javascript" src="js/AppSetting.js" ></script>
		<style>
			.product {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				padding: 2rem 4rem;
				background-color: #fff;
			}
			
			.model-product {
				padding: 1rem;
				border: 1px solid #d2d2d2;
				margin: 1rem;
			}
			
			.product-img {
				width: 16rem;
				height: 12rem;
				cursor: pointer;
				transition: all 0.6s;
			}
			
			.product-img:hover {
				transform: scale(1.4);
			}
			
			.product-p {
				display: flex;
				width: 16rem;
				padding: 1rem 0rem;
				text-indent: 1.6rem;
				font-size: 0.8rem;
				line-height: 1.2rem;
			}
			.layui-flow-more{
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="page">
			<!--
            	作者：offline
            	时间：2018-02-01
            	描述：模块头
            -->
			<div class="model-title">
				<div class="title-label">
					<label>产品展示</label>
				</div>
			</div>
			<!--
            	作者：offline
            	时间：2018-02-01
            	描述：产品
            -->
			<div class="product" id="DataList">
				<!--<div class="model-product">
					<img class="product-img" src="img/1.jpg" />
					<div class="product-p">
						<p>产品简要产品简要介绍产品简要介绍产品简要介绍产品简要介绍介绍</p>
					</div>
				</div>-->
				
			</div>
			<!--
                	作者：offline
                	时间：2018-01-31
                	描述：联系我们
                -->
			<div class="footbar">
				<div class="address">
					<span>联系我们</span>
					<div class="address-p">
						<p>地址：宁波市镇海骆驼工业区兴业路2号</p>
						<p>郝经理 ：13805889283</p>
						<p>李经理 ：13805881657</p>
						<p>传真：0574-87581936</p>
					</div>

				</div>
				<div class="link">
					<span>相关链接</span>
					<div class="link-a">
						<a href="https://www.baidu.com" target="_blank">百度</a>
					</div>

				</div>
			</div>
		</div>
	</body>

</html>
<script>
	//注意：导航 依赖 element 模块，否则无法进行功能性操作
	layui.use(['element', 'carousel'], function() {
		var element = layui.element,
			carousel = layui.carousel;

		BindDataList();

	});

	/**
	 * 数据列表
	 */
	function BindDataList() {
		layui.use('flow', function() {
			var flow = layui.flow;

			//流加载
			var pageSize = 15; //初始化默认显示15条
			ajaxget({
				url: 'api/NBtuodaPublic/GetProductList',
				success: function(data) {

					if(data == null) {
						return;
					}
					var pagetotal = Math.ceil(data.length / pageSize); //总页数

					flow.load({
						elem: '#DataList',
						isLazyimg: true, //开启图片懒加载
						done: function(page, next) {
							var lis = [];
							for(var index = (page - 1) * pageSize, len = data.length > page * pageSize ? page * pageSize : data.length; index < len; index++) {
								//组合html
								
								lis.push('<div class="model-product">');
								lis.push('<img class="product-img" src="'+ApiURL+ data[index].ImageUrl + '"/>');
								lis.push('<div class="product-p">');
								
								lis.push('<p>');
								lis.push(MyPublic.getFnDataellipsis(data[index].ContentData));
								lis.push('</p>');
								lis.push('</div>');
								lis.push('</div>');
							}

							next(lis.join(''), page < pagetotal);
						}
					});

				}
			})
		});
	}
</script>